<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head>

<meta name="layout" content="guest"/>
<title>Complete Profile</title>
<script type="text/javascript" src="${resource(dir: 'js', file: 'jquery.easydropdown.js')}"></script>
<%--<script type="text/javascript" src="${resource(dir: 'js', file: 'jquery.easydropdownsmall.js')}"></script>--%>
<%--<script type="text/javascript" src="${resource(dir: 'js', file: 'jquery.min.js')}"></script>--%>

<link href="${resource(dir: 'css', file: 'easydropdown.css')}" type="text/css" media="all" rel="stylesheet" />

<script type="text/javascript">

$(document).ready(function(){

	$("#previousBtnStep2").click(function(){
		$("#completeProfileStep1").show();
		$("#completeProfileStep2").hide();
		$("#completeProfileStep3").hide();
		$("#completeProfileStep4").hide();
	});

	$("#nextBtnStep1, #previousBtnStep3").click(function(){
		$("#completeProfileStep1").hide();
		$("#completeProfileStep2").show();
		$("#completeProfileStep3").hide();
		$("#completeProfileStep4").hide();
	});

	$("#nextBtnStep2, #previousBtnStep4").click(function(){
		$("#completeProfileStep1").hide();
		$("#completeProfileStep2").hide();
		$("#completeProfileStep3").show();
		$("#completeProfileStep4").hide();
	});

	$("#nextBtnStep3").click(function(){
		$("#completeProfileStep1").hide();
		$("#completeProfileStep2").hide();
		$("#completeProfileStep3").hide();
		$("#completeProfileStep4").show();
	});
	$("#submitBtnStep4").click(function(){
		$('#completeProfileForm').submit();
	});
});

</script>
</head>
<body>
	<g:form name="completeProfileForm" controller="home" method="POST" action="completeProfileProcess">
<%--		   inside conainter starts here  --%>
		<div class="inside_container" id="completeProfileStep1">

			<div align="left" class="inside_empty">
				<span class="inside_heading_title">CREATE PROFILE</span>

				<div class="form_steps">
					<ul>
						<li class="sactive">Step1</li>
						<li><a href="javascript:void(0)">Step2</a></li>
						<li><a href="javascript:void(0)">Step3</a></li>
						<li><a href="javascript:void(0)">Step4</a></li>
					</ul>
				</div>
			</div>

			<div align="left" class="help_container">

				<div>
					<table width="90%" border="0" align="center" cellpadding="4"
						cellspacing="4">
						<tr>
							<td align="right" valign="middle">&nbsp;</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle">&nbsp;</td>
						</tr>
						<tr>
							<td align="right" valign="middle">Profile Headline:</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle"><label for="textfield5"></label>
								<label for="textfield"></label> <g:textField
									name="profileHeadline" class="textfield" value="${userProfile?.headline}" /></td>
						</tr>
						<tr>
							<td width="30%" align="right" valign="middle">City:</td>
							<td width="2%" align="left" valign="middle">&nbsp;</td>
							<td width="58%" align="left" valign="middle"><label
								for="textfield3"></label> <g:textField name="city"
									class="textfield" value="${userProfile?.city}" /></td>
						</tr>
						<tr>
							<td width="30%" align="right" valign="middle">Country:</td>
							<td width="2%" align="left" valign="middle">&nbsp;</td>
							<td width="58%" align="left" valign="middle"><label
								for="select"></label> <g:countrySelect name="country"
									noSelection="['':'-Choose your country-']"
									value="${userProfile?.country}" class="dropdown"
									tabindex="7" data-settings='{"cutOff":10}' /></td>
						</tr>
						<tr>
							<td align="right" valign="middle">Birth Date:</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle">
								<table width="87%" border="0" align="left" cellpadding="0"
									cellspacing="0">
									<tr>
										<td align="left" valign="middle"><label for="select"></label>
											<g:datePicker name="dob" class="dropdown_small"
												precision="day" default="none" noSelection="['':'-Choose-']" value="${userProfile?.birthDate }"/>
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td align="right" valign="middle">Gender:</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle"><label for="select"></label>
								<g:select name="gender" noSelection="['':'-Choose-']" class="dropdown" from="${[ 'Male','Female'] }" value="${userProfile?.gender }" /></td>
						</tr>
						<tr>
							<td width="30%" align="right" valign="middle">Sexual
								Preferences:</td>
							<td width="2%" align="left" valign="middle">&nbsp;</td>
							<td width="58%" align="left" valign="middle"><label
								for="select"></label> <g:select name="sexualPreferences"
									from="${['Straight', 'Bi-Sexual', 'Bi-Curious', 'Gay'] }" class="dropdown" value="${userProfile?.sexualPref }"/></td>
						</tr>
						<tr>
							<td align="right" valign="middle">Marital Status:</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle" class="send_btn"><label
								for="select"></label> <g:select name="maritalStatus"
									class="dropdown" from="${['Married','Unmarried'] }" value="${userProfile?.maritalStatus }" />
							</td>
						</tr>
						<tr>
							<td align="right" valign="middle">Ethinicity:</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle" class="send_btn"><label
								for="select"></label> <g:select name="ethinicity"
									class="dropdown" from="${['Yes', 'No'] }" value="${userProfile?.ethinicity }"/></td>
						</tr>
						<tr>
							<td align="right" valign="middle">Eyes (Color):</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle"><label for="select"></label>
								<g:select name="eyesColor" class="dropdown" from="${['Yes', 'No'] }" value="${userProfile?.eyeColor }" />
							</td>
						</tr>
						<tr>
							<td align="right" valign="middle">Hair:</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle"><label for="select"></label>
								<g:select name="hair" from="${['Yes', 'No'] }" class="dropdown" value="${userProfile?.hair }"/></td>
						</tr>
						<tr>
							<td align="right" valign="middle">Body Type:</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle"><label for="select"></label>
								<g:select name="bodyType" from="${['Yes', 'No'] }" class="dropdown" value="${userProfile?.bodyType }"/>
							</td>
						</tr>
						<tr>
							<td align="right" valign="middle">Weight:</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle">
								<table width="90%" border="0" align="left" cellpadding="0" cellspacing="0">
									<tr>
										<td>
											<label for="textfield6"></label> 
											<g:textField class="textfield_small" name="weight" value="${userProfile?.weight }"/>
										</td>
										<td>
											<label for="select"></label> 
											<g:select name="weightUnits" from="${['Kgs', 'Pounds']}" class="dropdown" value="${userProfile?.weightUnit }"/>
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td width="30%" align="right" valign="middle">Height:</td>
							<td width="2%" align="left" valign="middle">&nbsp;</td>
							<td width="58%" align="left" valign="middle">
								<table width="90%" border="0" align="left" cellpadding="0" cellspacing="0">
									<tr>
										<td>
											<label for="textfield12"></label> 
											<g:textField class="textfield_small" name="height" value="${userProfile?.height }"/>
										</td>
										<td>
											<label for="select"></label> 
											<g:select name="heightUnits" from="${['Cms', 'Inches']}" class="dropdown" value="${userProfile?.heightUnit }"/>
										</td>
									</tr>
								</table>
							</td>
						</tr>
						<tr>
							<td align="right" valign="middle">&nbsp;</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle">&nbsp;</td>
						</tr>
						<tr>
							<td align="right" valign="middle">&nbsp;</td>
							<td align="left" valign="middle">&nbsp;</td>
							<td align="left" valign="middle" class="send_btn">
							<table width="85%" border="0" cellspacing="0" cellpadding="0">
									<tr>
										<td align="center" valign="middle"><a href="#" id="nextBtnStep1">NEXT</a></td>
									</tr>
							</table>
							</td>
						</tr>
					</table>
				</div>


			</div>

		</div>
		<%-- inside conainter ends here--%>
				   
					<%-- inside conainter starts here--%>  
		  <div class="inside_container" id="completeProfileStep2" style="display:none;">
		 
		 <div align="left" class="inside_empty">
		 	 <span class="inside_heading_title">CREATE PROFILE</span> 
		     
		     <div class="form_steps">
		     	<ul>
		        <li class="sactive">Step1</li>
		        <li class="sactive">Step2</li>
		        <li><a href="javascript:void(0)">Step3</a></li>
		        <li><a href="javascript:void(0)">Step4</a></li>
		        </ul>
		     </div>  		
		    </div>
			
		    <div align="left" class="help_container">
		    	
		        <div>
		        <table width="90%" border="0" align="center" cellpadding="4" cellspacing="4">
		  <tr>
		    <td align="right" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle">&nbsp;</td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">Smoke:</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle"><label for="select"></label>
		    <g:select name="smoke" from="${['No Answer','Heavy','Moderate','Light','Occasional','Non Smoker','Herb'] }" class="dropdown" value="${userProfile?.smoke }"/>
		     </td>
		  </tr>
		  <tr>
		    <td width="30%" align="right" valign="middle">Drink:</td>
		    <td width="2%" align="left" valign="middle">&nbsp;</td>
		    <td width="58%" align="left" valign="middle"><label for="select"></label>
		    <g:select name="drink" from="${['No Answer','Heavy','Moderate','Light','Occasional','Non Drinker'] }" class="dropdown" value="${userProfile?.drink }"/>
		     </td>
		  </tr>
		  <tr>
		    <td width="30%" align="right" valign="middle">Drugs:</td>
		    <td width="2%" align="left" valign="middle">&nbsp;</td>
		    <td width="58%" align="left" valign="middle"><label for="select"></label>
		    <g:select name="drugs" from="${['YES', 'NO'] }" class="dropdown" value="${userProfile?.drugs }"/>
		     </td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">Occupation/Major:</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle"><label for="textfield7"></label>
		      <g:textField type="text" class="textfield" name="occupation" value="${userProfile?.occupation }"/></td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">School/College:</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle"><label for="textfield4"></label>
		      <label for="textfield8"></label>
		      <g:textField type="text" class="textfield" name="schoolOrCollegeName" value="${userProfile?.school }"/></td>
		  </tr>
		  <tr>
		    <td width="30%" align="right" valign="middle">Favorite Food:</td>
		    <td width="2%" align="left" valign="middle">&nbsp;</td>
		    <td width="58%" align="left" valign="middle"><label for="textfield9"></label>
		      <g:textField type="text" class="textfield" name="favouriteFood" value="${userProfile?.favFood }"/></td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">Pets:</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle" class="send_btn"><label for="textfield10"></label>
		      <g:textField type="text" class="textfield" name="pets" value="${userProfile?.pets }"/></td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">Cars:</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle" class="send_btn"><label for="textfield11"></label>
		      <g:textField type="text" class="textfield" name="cars" value="${userProfile?.cars }"/></td>
		  </tr>
		  <tr>
		    <td width="30%" align="right" valign="middle">&nbsp;</td>
		    <td width="2%" align="left" valign="middle">&nbsp;</td>
		    <td width="58%" align="left" valign="middle"></td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle" class="send_btn"><table width="85%" border="0" cellspacing="0" cellpadding="0">
		      <tr>
		        <td align="left" valign="middle" class="small_btn"><a href="#" id="previousBtnStep2">PREVIOUS</a></td>
		        <td align="left" valign="middle" class="small_btn"><a href="#" id="nextBtnStep2">NEXT</a></td>
		      </tr>
		    </table></td>
		  </tr>
		        </table>
		        </div>
		    
		    
		    </div>
		
		</div>
			<%--	inside conainter ends here --%>
				   
			<%-- inside conainter starts here  --%>
		  <div class="inside_container" id="completeProfileStep3" style="display:none;">
		 
		 <div align="left" class="inside_empty">
		 	 <span class="inside_heading_title">CREATE PROFILE</span> 
		     
		     <div class="form_steps">
		     	<ul>
		        <li class="sactive">Step1</li>
		        <li class="sactive">Step2</li>
		        <li class="sactive">Step3</li>
		        <li><a href="javascript:void(0)">Step4</a></li>
		        </ul>
		     </div>  		
		    </div>
			
		    <div align="left" class="help_container">
		    	
		        <div>
		        <table width="90%" border="0" align="center" cellpadding="4" cellspacing="4">
		  <tr>
		    <td align="right" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle">&nbsp;</td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">Talent:</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle"><label for="textfield5"></label>
		      <label for="textarea"></label>
		      <g:textArea class	="textarea" name="talent" cols="45" rows="5" value="${userProfile?.talent }"></g:textArea></td>
		  </tr>
		  <tr>
		    <td width="30%" align="right" valign="middle">Perfect Mate:</td>
		    <td width="2%" align="left" valign="middle">&nbsp;</td>
		    <td width="58%" align="left" valign="middle"><label for="textarea2"></label>
		      <g:textArea class="textarea" name="perfectMate" cols="45" rows="5" value="${userProfile?.perfectMate }"></g:textArea></td>
		  </tr>
		  <tr>
		    <td width="30%" align="right" valign="middle">Turn Ons/Offs:</td>
		    <td width="2%" align="left" valign="middle">&nbsp;</td>
		    <td width="58%" align="left" valign="middle"><label for="textfield2"></label>
		      <label for="textarea3"></label>
		      <g:textArea class="textarea" name="turnOffAndOn" cols="45" rows="5" value="${userProfile?.turnOnsOffs }"></g:textArea></td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">Perfect Date:</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle"><label for="textarea4"></label>
		      <g:textArea class="textarea" name="perfectDate" cols="45" rows="5" value="${userProfile?.perfectDate }"></g:textArea></td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">Meaning of Life:</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle"><label for="textfield4"></label>
		      <label for="textarea5"></label>
		      <g:textArea class="textarea" name="meaningOfLife" cols="45" rows="5" value="${userProfile?.meaningOfLife }"></g:textArea></td>
		  </tr>
		  <tr>
		    <td width="30%" align="right" valign="middle">Favorite Books:</td>
		    <td width="2%" align="left" valign="middle">&nbsp;</td>
		    <td width="58%" align="left" valign="middle"><label for="textarea6"></label>
		      <g:textArea class="textarea" name="favoriteBooks" cols="45" rows="5" value="${userProfile?.favoriteBooks }"></g:textArea></td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">Favorite Movies:</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle" class="send_btn"><label for="textarea7"></label>
		      <g:textArea class="textarea" name="favoriteMovie" cols="45" rows="5" value="${userProfile?.favoriteMovies }"></g:textArea></td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">Favorite Songs/Music:</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle" class="send_btn"><label for="textarea8"></label>
		      <g:textArea class="textarea" name="favoriteMusic" cols="45" rows="5" value="${userProfile?.favoriteMusic }"></g:textArea></td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">Hobbies:</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle"><label for="textarea9"></label>
		      <g:textArea class="textarea" name="hobbies" cols="45" rows="5" value="${userProfile?.hobbies }"></g:textArea></td>
		  </tr>
		  <tr>
		    <td width="30%" align="right" valign="middle">&nbsp;</td>
		    <td width="2%" align="left" valign="middle">&nbsp;</td>
		    <td width="58%" align="left" valign="middle"></td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle" class="send_btn"><table width="85%" border="0" cellspacing="0" cellpadding="0">
		      <tr>
		        <td align="left" valign="middle" class="small_btn"><a href="#" id="previousBtnStep3">PREVIOUS</a></td>
		        <td align="left" valign="middle" class="small_btn"><a href="#" id="nextBtnStep3">NEXT</a></td>
		      </tr>
		    </table></td>
		  </tr>
		        </table>
		        </div>
		    
		    
		    </div>
		
		</div>
		<%--inside conainter ends here --%>
				   
				    
		  <%-- inside conainter starts here --%>  
		  <div class="inside_container" id="completeProfileStep4" style="display:none;">
		 
		 <div align="left" class="inside_empty">
		 	 <span class="inside_heading_title">CREATE PROFILE</span> 
		     
		     <div class="form_steps">
		     	<ul>
		        <li class="sactive">Step1</li>
		        <li class="sactive">Step2</li>
		        <li class="sactive">Step3</li>
		        <li class="sactive">Step4</li>
		        </ul>
		     </div>  		
		    </div>
			
		    <div align="left" class="help_container">
		    	
		        <div>
		        <table width="90%" border="0" align="center" cellpadding="4" cellspacing="4">
		  <tr>
		    <td align="right" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle">&nbsp;</td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">Craziest thing I've eer done:</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle"><label for="textfield5"></label>
		      <label for="textarea"></label>
		      <g:textArea class	="textarea" name="craziestThingDone" cols="45" rows="5" value="${userProfile?.craziestThingEverDone }"></g:textArea></td>
		  </tr>
		  <tr>
		    <td width="30%" align="right" valign="middle">If I could be anywhere right now:</td>
		    <td width="2%" align="left" valign="middle">&nbsp;</td>
		    <td width="58%" align="left" valign="middle"><label for="textarea2"></label>
		      <g:textArea class="textarea" name="wishPlace" cols="45" rows="5" value="${userProfile?.anywhereRightNow }"></g:textArea></td>
		  </tr>
		  <tr>
		    <td width="30%" align="right" valign="middle">Five things I can't live without:</td>
		    <td width="2%" align="left" valign="middle">&nbsp;</td>
		    <td width="58%" align="left" valign="middle"><label for="textfield2"></label>
		      <label for="textarea3"></label>
		      <g:textArea class="textarea" name="cantLiveWithout" cols="45" rows="5" value="${userProfile?.fiveThingsCannotLiveWithout }"></g:textArea></td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">What I like to do for fun:</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle"><label for="textarea4"></label>
		      <g:textArea class="textarea" name="doForFun" cols="45" rows="5" value="${userProfile?.doForFun }"></g:textArea></td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">Best reason to get to know me:</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle"><label for="textfield4"></label>
		      <label for="textarea5"></label>
		      <g:textArea class="textarea" name="reasonToKnowMe" value="${userProfile?.reasonToKnowMe }" cols="45" rows="5"></g:textArea></td>
		  </tr>
		  <tr>
		    <td width="30%" align="right" valign="middle">More about me / Bio:</td>
		    <td width="2%" align="left" valign="middle">&nbsp;</td>
		    <td width="58%" align="left" valign="middle"><label for="textarea6"></label>
		      <g:textArea class="textarea" name="abtMe" cols="45" rows="5" value="${userProfile?.moreAboutMe }"></g:textArea></td>
		  </tr>
		  <tr>
		    <td width="30%" align="right" valign="middle">&nbsp;</td>
		    <td width="2%" align="left" valign="middle">&nbsp;</td>
		    <td width="58%" align="left" valign="middle"></td>
		  </tr>
		  <tr>
		    <td align="right" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle">&nbsp;</td>
		    <td align="left" valign="middle" class="send_btn"><table width="85%" border="0" cellspacing="0" cellpadding="0">
		      <tr>
		        <td align="left" valign="middle" class="small_btn"><a href="#" id="previousBtnStep4">PREVIOUS</a></td>
		        <td align="left" valign="middle" class="small_btn"><a href="#" id="submitBtnStep4">SUBMIT</a></td>
		        </tr>
		    </table></td>
		  </tr>
		        </table>
		        </div>
		    
		    
		    </div>
		
		</div>
		   <%-- inside conainter ends here --%>
	</g:form>
  
</body>
</html>
 